import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    const String appTitle = 'Flutter layout demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: const SingleChildScrollView(
          child: Column(
            children: [
              ImageSection(),
              Padding(
                padding: EdgeInsets.all(24.0),
                child: TextSection(
                    title: "Oeschinen Lake Campground",
                    location: "Kandersteg, Switzerland"),
              ),
              IconSection(),
              Padding(
                padding: EdgeInsets.all(24.0),
                child: Text(
                  "Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps."
                  " Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes."
                  " A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest,"
                  " leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here",
                  style: TextStyle(fontSize: 12, fontWeight: FontWeight.w300),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ImageSection extends StatelessWidget {
  const ImageSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Image(
      fit: BoxFit.cover,
      width: MediaQuery.of(context).size.width,
      height: 200,
      image: const NetworkImage(
          "https://cdn.pixabay.com/photo/2022/02/07/22/39/nature-7000445_1280.jpg"),
    );
  }
}

class TextSection extends StatelessWidget {
  const TextSection({super.key, required this.title, required this.location});

  final String title;
  final String location;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                  fontFamily: "Roboto",
                ),
              ),
              SizedBox(
                height: 8,
              ),
              Text(
                location,
                style: TextStyle(
                  color: Colors.grey[500],
                  fontSize: 11,
                ),
              ),
            ],
          ),
        ),
        StarSection()
      ],
    );
  }
}

class StarSection extends StatefulWidget {
  const StarSection({
    super.key,
  });

  @override
  State<StarSection> createState() => _StarSectionState();
}

class _StarSectionState extends State<StarSection> {
  void onStarChanged() {
    setState(() {
      _isFavorite ? _stars-- : _stars++;
      _isFavorite = !_isFavorite;
    });
  }

  bool _isFavorite = false;
  int _stars = 41;
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          padding: EdgeInsets.all(0),
          onPressed: onStarChanged,
          icon: _isFavorite ? const Icon(Icons.star) : const Icon(Icons.star_border),
          color: Colors.deepOrange,
        ),
        Text(
          '$_stars',
          style: TextStyle(fontSize: 12),
        ),
      ],
    );
  }
}

class IconSection extends StatelessWidget {
  const IconSection({super.key});

  final IconData icon = Icons.call;
  Widget _iconWidget(BuildContext context, IconData icon, String text) {
    return Column(children: [
      Icon(
        icon,
        color: Theme.of(context).primaryColor,
        size: 20,
      ),
      SizedBox(
        height: 4,
      ),
      Text(
        text,
        style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w300,
            color: Theme.of(context).primaryColor),
      )
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
      _iconWidget(context, Icons.call, "CALL"),
      _iconWidget(context, Icons.route, "ROUTE"),
      _iconWidget(context, Icons.share, "SHARE"),
    ]);
  }
}
